<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script type="text/javascript" src="/assets/js/def.js"></script>
    <script src="/assets/lib/underscore/underscore-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../style/form/form.css">
    <link rel="stylesheet" type="text/css" href="../style/button/btn.css">
  </head>
  <body>
    <div class="w800 box normal-container">
      <form name="form1" class="form" action="#">
        <div class="form-row">
          <label>昵称：</label>
          <div>
            <input type="text" name="name" id="name">
          </div>
        </div>
        <div class="error-message" id="validate-name-message"></div>
        <div class="form-row">
          <label>邮箱：</label>
          <div>
            <input type="text" name="email" id="email">
          </div>
        </div>
        <div class="error-message" id="validate-email-message"></div>
        <div class="form-row">
          <div>
            <button type="button" class="btn btn-primary" onclick="submit1()">提交</button>
            <button type="button" class="btn">取消</button>
          </div>
        </div>
      </form>
    </div>
    <script src="index.js"></script>
    <script>
      function submit1() {
        if (!validate({
          name: {
            val: document.getElementById('name').value,
            rules: [{
              t: 'required',
              s: function(val) {
                $('#name').removeClass('has-error')
                $('#validate-name-message').html('');
              },
              f: function(val) {
                $('#name').addClass('has-error')
                $('#validate-name-message').html('请输入name！15个字以内');
              }
            }]
          }
        })) {
          return false;
        }

      }
    </script>
  </body>
</html>
